<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;font-size:12px"
      :height="$store.getters.tableHeight"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column label="授权名" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.anent_content.anent_name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="code_num"
        label="授权编码"
        width="80"
        align="center"
      />
      <el-table-column
        prop="tb_name"
        label="淘宝店名"
        align="center"
      />
      <el-table-column
        prop="tb_address"
        label="店铺地址"
        align="center"
      />
      <el-table-column label="淘宝授权图" align="center">
        <template v-if="scope.row.tb_approval_img" slot-scope="scope">
          <el-image
            style="width: 80px; height: 80px"
            :src="scope.row.tb_approval_img"
            :preview-src-list="[scope.row.tb_approval_img]"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="tb_date"
        label="有效期"
        align="center"
      />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.tb_status === '1'" type="text" size="small" @click="xuqi(scope.row)">续期</el-button>
          <el-button v-if="scope.row.tb_status === '0'" type="text" size="small" @click="checkImpower(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { checkTaobaoImpowerApi, resetTaobaoImpowerPicApi } from '@/api/agent'
import { getNewTime } from '@/utils/index'
import { drawPhoto } from '@/utils/drawPhoto'
import { conversion } from '@/utils/rules'

export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('selectArr', val)
    },
    checkImpower(row) {
      this.$prompt(`授权名[ ${row.anent_content.anent_name} ]`, `淘宝授权申请`, {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '拒绝',
        inputPlaceholder: '请输入授权天数，若不输入默认365天'
      }).then(({ value }) => {
        console.log(value)
        const tb_date = value ? getNewTime(Number(value)) : getNewTime(365)
        const data = {
          anent_id: row.anent_id,
          brand_id: row.brand_id,
          tb_status: '1',
          tb_date: tb_date
        }
        console.log(data)
        checkTaobaoImpowerApi(data).then(res => {
          console.log(res)
          if (res.code === 200) {
            const textArr = [
              {
                text: row.anent_content.anent_name,
                x: 360,
                y: 360
              },
              {
                text: conversion(row.anent_content.people_card_num, 6, 14, 8),
                x: 360,
                y: 398
              },
              {
                text: row.tb_name,
                x: 360,
                y: 430
              },
              {
                text: row.code_num,
                x: 329,
                y: 500
              },
              {
                text: row.brand_content.brand_name,
                x: 480,
                y: 500
              },
              {
                text: '淘宝平台',
                x: 384,
                y: 535
              },
              {
                text: row.tb_address,
                x: 260,
                y: 570
              },
              {
                text: tb_date,
                x: 290,
                y: 675
              }
            ]
            let warrantImg = ''
            drawPhoto(res.img.tb_approval_img, { width: '787', height: '1113' }, textArr, imgUrl => {
              console.log(imgUrl)
              warrantImg = imgUrl
              const that = this
              const imgData = {
                anent_id: row.anent_id,
                brand_id: row.brand_id,
                code_num: row.code_num,
                tb_approval_img: warrantImg
              }
              console.log(imgData)
              resetTaobaoImpowerPicApi(imgData).then(res => {
                console.log(res)
                if (res.code === 200) {
                  that.$message.success('淘宝授权成功')
                  this.$emit('reloadFun')
                }
              })
            })
          }
        })
      }).catch(action => {
        if (action === 'cancel') {
          // console.log('拒绝')
          const data = {
            anent_id: row.anent_id,
            brand_id: row.brand_id,
            tb_status: '2'
          }
          checkTaobaoImpowerApi(data).then(res => {
            if (res.code === 200) {
              this.$message.warning('申请已拒绝！')
              this.$emit('reloadFun')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
